<template>
  <z-paging ref="paging" v-model="list" @query="queryList">
    <view slot="top">
      <search :showBack="false" @click="toSearch"></search>
    </view>
    <view class="material-container">
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index" @click="toGoodsList(item)">
          <image :src="item.fileUrl" class="mini-img"></image>
          <view class="name">{{ item.name }}</view>
          <view class="enname">{{item.ename}}</view>
          <c-image class="image" :src="item.backgroundUrl" radius="8rpx"/>
        </view>
      </view>
    </view>
    <tabbar slot="bottom"/>
  </z-paging>
</template>

<script>
import {getMaterialList} from "@/api/home";

export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    toSearch() {
      uni.navigateTo({
        url: '/pages/search/search?source=xuancai'
      })
    },
    queryList() {
      getMaterialList({pageNum: 1, pageSize: 1000}).then(res => {
        this.$refs.paging.complete(res.records || [])
      })
    },
    toGoodsList(item) {
      uni.navigateTo({
        url: '/pages/goods/list?type=xuancai&chooseItemId='+item.id
      })
    }
  },
  created() {
  },
}
</script>

<style lang="scss">
@import "@/static/styles/minix.scss";

.material-container {
  .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10rpx;
    padding: 20rpx;
    .item {
      position: relative;
      aspect-ratio: 1 / 0.7;
      @include flex-center;
      flex-direction: column;
			border-radius: 8rpx;
      .c-image {
        position: absolute;
        inset: 0;
        object-fit: cover;
        height: 100%;
        width: 100%;
      }
			.mini-img {
			 	width: 60rpx;
				height: 60rpx;
				position: relative;
				z-index: 1;
				margin-bottom: 32rpx;
			 }
      .name, .enname {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 28rpx;
        @include overLine()
      }
    }
  }
}
</style>
